<template>
	<view class="home">
		<!-- 轮播图 -->
		<view class="swipper-cont">
			<swiper indicator-dots autoplay circular indicator-color="#fff">
				<swiper-item v-for="item in ImgList" :key="item.id" @click="GoToDetail(item)">
					<image :src="item.pictureAdress">
					</image>
					<view class="img-title">
						<text> {{item.content.substring(0,14)}}</text>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<!-- 搜索区域 -->
		<view class="search">
			<!-- 搜索框 -->
			<MySearch :searchname="Searchname"></MySearch>
		</view>
		<!-- 具体推荐 -->
		<view class="title">
			<text>今日推荐</text>
		</view>
		<!-- 分类 -->
		<view class="uni-list-cell">
			<view class="three-picker">
				<!-- 分类 -->
				<view class="every-pic">

					<view class="uni-list-cell-db">
						<picker :range="array" :value="catgory" @change="GetValue">
							<view class="uni-input" style="padding-right:60rpx;">{{array[catgory]}}</view>
						</picker>
					</view>
					<view class="arrow">
						<image
							src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/20638107-bec4-40e6-b264-29bbc11a83f2image/png">
						</image>
					</view>
				</view>

				<!-- 排序 -->
				<view class="every-pic">

					<view class="uni-list-cell-db">
						<picker :range="array1" @change="GetValue1" :value="index">
							<view class="uni-input">{{array1[index]}}</view>
						</picker>
					</view>
					<view class="arrow">
						<image
							src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/20638107-bec4-40e6-b264-29bbc11a83f2image/png">
						</image>
					</view>
				</view>

			</view>

		</view>
		<!-- 文章 -->
		<view class="my-essay">
			<MyEssay :textlist="testList" :isShow="false" :carId="catgory" :order="index" ref="essay">
			</MyEssay>
		</view>

	</view>
</template>

<script>
	import MySearch from '@/components/MySearch.vue'
	import MyEssay from '@/components/MyEssay.vue'
	export default {
		data() {
			return {
				array: [],
				array1: ['正序', '倒序'],
				catgory: 0,
				index: 0,
				testList: [],
				Searchname: '搜索',
				arcInfo: {
					category_id: 1,
					current: 1,
					orderByTime: '',
					size: 10,
					title: ''
				},
				ParseNumber: this.$store.state.article.newParseNumber,
				ImgList: null,
			}
		},

		components: {
			MySearch,
			MyEssay
		},
		onLoad() {
			this.getuserinfo();
			// let pages = getCurrentPages();
			// console.log('当前页面的路由：', pages[pages.length - 1].$page.fullPath)
			this.GetAllImageData(); //轮播图
			this.GetCateData();
			this.GetIndexActile(this.arcInfo);
			uni.$on('UpdatePrise', this.f11);

		},
		watch: {
			ParseNumber() {
				this.GetIndexActile(this.arcInfo)
			}
		},
		methods: {
			//拿到用户信息
			getuserinfo() {
				this.$store.dispatch('GetUserInfo');
			},
			//点赞更新
			f11() {
				this.GetIndexActile(this.arcInfo);
			},
			//拿到分类框的数据
			GetValue(e) {
				this.catgory = e.detail.value
				const num = 1
				// console.log('num类型', typeof num)
				// console.log('改变后的数据类型', typeof parseInt(this.catgory))
				// console.log('分类数据', this.catgory)
				this.arcInfo.category_id = (parseInt(this.catgory) + num)
				// console.log(this.arcInfo)
				this.GetIndexActile(this.arcInfo)
			},
			GetValue1(e) {
				this.index = e.detail.value
				this.arcInfo.orderByTime = this.index
				this.GetIndexActile(this.arcInfo)
			},
			//拿到数据字典
			async GetCateData() {
				let res = this.$store.dispatch('CategoryData')
				res.then(() => {
					const arr1 = this.$store.state.docter.categoryId[1]
					const arr2 = this.$store.state.docter.categoryId[2]
					this.array = [arr1, arr2]
				})
			},
			//得到首页文章
			async GetIndexActile(data) {
				if (this.catgory === 0) {
					const num = 1
					data.category_id = this.catgory + num // 得到文章Id
				}
				data.orderByTime = this.index
				let res = this.$store.dispatch('GetindexAllInfo', data)
				res.then(() => {
					this.testList = this.$store.state.article.actircleinfo;
					// console.log('文章数据', this.testList)
				})
			},
			//拿到轮播图资源
			async GetAllImageData() {
				let result = await this.$store.dispatch('getallImg');
				if (result == 'ok') {
					this.ImgList = this.$store.state.article.AllIndexImg;
				} else {
					uni.showToast({
						title: "请求失败",
					})
				}
			},
			//跳转文章页面
			GoToDetail(item) {
				const {
					id
				} = item;
				uni.navigateTo({
					url: `/pages/BookDetail/BookDetail?id=${id}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		width: 750rpx;

		.swipper-cont {
			width: 750rpx;
			height: 400rpx;
			position: relative;

			swiper {
				width: 750rpx;
				height: 100%;

				.img-title {
					width: 600rpx;
					height: 100rpx;
					position: absolute;
					z-index: 111;
					bottom: 1rpx;
					left: 30rpx;
					color: #fff;
					font-weight: bold;
					font-size: 35rpx;
				}
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		// 搜索区域
		.search {
			width: 750rpx;
			height: 70rpx;

		}

		// 文本
		.title {
			color: #000000;
			font-weight: 500;
			height: 50rpx;
		}

		// 选择器
		.uni-list-cell {
			width: 750rpx;
			height: 100rpx;

			.three-picker {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.every-pic {
					display: flex;
					position: relative;

					// view {
					// 	margin-right: 20rpx;
					// }

					.uni-list-cell-db {
						width: 220rpx;
						text-align: center;
						padding-right: -40rpx;
						font-size: 26rpx;
					}

					.arrow {
						width: 15rpx;
						height: 25rpx;
						margin-left: -60rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		// 文章
		.my-essay {
			width: 750rpx;
			height: auto;

		}
	}
</style>
